<template>
  <div>
    <div style="height:6vh;background-color:#fff;padding: 10px 20px;">
      <span style="line-height: 60px;font-size: 20px;">审批列表</span>
    </div>

    <!-- 查询条件 -->
    <el-card style="margin: 20px;">
      <el-form :inline="true" @submit.native.prevent>
        <el-form-item label="请假人姓名">
          <el-input v-model="searchForm.employeeName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="loadAuditList">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card style="margin: 20px;">
      <el-radio-group style="margin-bottom: 15px;"
                      v-model="type" @change="loadAuditList">
        <el-radio-button label="1" size="large">待我审核</el-radio-button>
        <el-radio-button label="2" size="large">待他人审核</el-radio-button>
        <el-radio-button label="3" size="large">已审核</el-radio-button>
        <el-radio-button label="4" size="large">驳回</el-radio-button>
      </el-radio-group>
      <el-table :data="auditList">
        <el-table-column label="编号" type="index" align="center"></el-table-column>
        <el-table-column label="申请人" prop="employeeName" align="center"></el-table-column>
        <el-table-column label="请假类型" prop="type" align="center"></el-table-column>
        <el-table-column label="开始时间" prop="startTime" align="center"></el-table-column>
        <el-table-column label="结束时间" prop="endTime" align="center"></el-table-column>
        <el-table-column label="请假原因" prop="reason" align="center"></el-table-column>
        <el-table-column label="操作" align="center" v-if="type!=2">
          <template #default="{row}">
            <el-button type="primary" size="small" link v-if="type==1"
                       @click="auditing(row.id)">审批
            </el-button>
            <el-button type="primary" size="small" link v-if="type==4 || type==3"
                       @click="auditing(row.id)">查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[3, 4, 5]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          style="margin-top: 20px;">
      </el-pagination>
    </el-card>

    <!--  审批查看弹窗  -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <el-descriptions direction="horizontal" :column="2" border>
        <el-descriptions-item label="请假人">{{ auditData.employeeName }}</el-descriptions-item>
        <el-descriptions-item label="请假类型">{{ auditData.type }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ auditData.startTime }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ auditData.endTime }}</el-descriptions-item>
        <el-descriptions-item label="请假原因">{{ auditData.reason }}</el-descriptions-item>
        <el-descriptions-item label="审批意见">
          <el-input placeholder="请输入审批意见" v-model="auditData.comments" :disabled="type!=1"></el-input>
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" v-if="auditData.auditStatus==1">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" plain @click="auditReject">驳回</el-button>
        <el-button type="primary" @click="auditPass">通过</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios';
import {Message} from 'element-ui';
import qs from "qs";

export default {
  data() {
    return {
      getUser: this.$getUser(),
      type: 1,
      dialogVisible: false,
      dialogTitle: '审批详情',
      auditData: {
        employeeName: '',
        type: null,
        startTime: '',
        endTime: '',
        reason: '',
        comments: '',
      },
      searchForm: {
        employeeName: ''
      },
      auditList: [],
      pagination: {
        current: 1,
        size: 3,
        total: 0
      }
    };
  },
  mounted() {
    this.loadAuditList();
  },
  methods: {
    // 加载审批列表
    loadAuditList() {
      const data = qs.stringify({
        pageCurrent: this.pagination.current,
        pageSize: this.pagination.size,
        ...this.searchForm,
        auditStatus: this.type,
        auditEmployeeId: this.getUser.id,
      });
      axios.get(this.$BASE_URL + '/v1/audit/list?' + data)
          .then(res => {
            console.log(res.data)
            if (res.data.state === 2000) {
              this.auditList = res.data.data.auditList;
              this.pagination.total = res.data.data.total;
            }
          })
    },

    // 审批按钮
    auditing(id) {
      this.dialogVisible = true;
      axios.get(this.$BASE_URL + '/v1/audit/list/?id=' + id)
          .then(res => {
            console.log(res.data)
            if (res.data.state === 2000) {
              this.auditData = res.data.data.auditList[0];
            } else {
              Message.error(res.data.msg);
            }
          });
    },

    // 取消审批
    cancel() {
      this.dialogVisible = false;
      this.comments = '';
    },

    //  通过审批
    auditPass() {
      //将当前的审批意见也就是审批状态传给后端
      this.auditData.auditStatus = 3;
      this.submit(this.auditData);
    },

    // 驳回审批
    auditReject() {
      //将当前的审批意见也就是审批状态传给后端
      this.auditData.auditStatus = 4;
      this.submit(this.auditData);
    },

    submit(data){
      axios.post(this.$BASE_URL + '/v1/audit/update', qs.stringify(data))
          .then(res => {
            console.log(res.data)
            if (res.data.state === 2000) {
              Message.success('操作成功');
              this.dialogVisible = false;
              this.comments = '';
              this.loadAuditList();
            } else {
              Message.error(res.data.msg);
            }
          })
    },

    // 重置查询
    resetSearch() {
      this.searchForm = {};
      this.pagination.current = 1;
      this.loadAuditList();
    },

    // 分页处理
    handleSizeChange(size) {
      this.pagination.size = size;
      this.loadAuditList();
    },

    handleCurrentChange(current) {
      this.pagination.current = current;
      this.loadAuditList();
    }
  }
};
</script>

<style scoped>
.el-form-item {
  margin-bottom: 0;
}
</style>